@extends('admin.layout.layout', ['row' => @$page])

@section('contain')
    <style>
    </style>

    <div class="portlet">
        <div class="portlet-title">
            <div class="caption">
                <x-portlet-breadcrumb :page="$page"></x-portlet-breadcrumb>
            </div>
            <div class="actions"></div>
        </div>

        <div class="my-3 bg-light p-3 px-4">
            <div class="row">
                <div class="col-auto">
                    <b>{{ ts('SDZH') }}</b>：
                    <span>{{ @$user->unique_id }}</span>
                </div>
                <div class="col-auto">
                    <b>{{ ts('SDQY') }}</b>：
                    <span>{{ @$user->abbr }}</span>
                </div>
                <div class="col-auto">
                    <b>{{ ts('PHONENUMBER') }}：</b>
                    <span>{{ @$user->phone_number }}</span>
                </div>
            </div>
        </div>

        <div class="filter-wrapper">
            <form action="/{{ request()->path() }}/" class="form-inline filter-form">
                <div class=" input-group mb-3 custom-control-inline">
                    <input type="text" class="form-control s-input" name="value" value="{{ request()->input('value') }}" placeholder="{{ ts('distributoRperformanceSEARCHTEXT') }}">
                </div>

                <x-p-f-select></x-p-f-select>
                {{--<x-film-type-select label="{{ ts('DATESOLD') }}"></x-film-type-select>--}}

                <x-flatpickr-date-range label="{{ ts('DATESOLD') }}"></x-flatpickr-date-range>

                <div class="mb-3">
                    <button class="btn btn-primary">{{ ts('SEARCH') }}</button>
                    <a href="/{{ request()->path() }}/" class="btn btn-warning">{{ ts('RESET') }}</a>
                    <a class="btn btn-primary" href="/{{ request()->path() }}/charts">{{ ts('TUBIAO') }}</a> {{-- type="button" onclick="showChart()"--}}
                </div>

            </form>
        </div>

        <div>
            <table class="table text-center text-nowrap bt-table d-none">
                <thead>
                <tr class="order_column text-center">
                    <th data-field="index">{{ ts('sequence') }}</th>
                    <th data-field="jxsmc" class="sortable {{ setOrderClass('jxsmc') }}">{{ ts('jxsmc') }}</th>
                    <th data-field="roll_number" class="sortable {{ setOrderClass('roll_number') }}">{{ ts('rollnumber') }}</th>
                    <th data-field="film_type" class="sortable {{ setOrderClass('film_type') }}">{{ ts('FILMTYPE') }}</th>
                    <th data-field="length" class="sortable {{ setOrderClass('length') }}">{{ ts('ysycd') }}</th>
                    <th>{{ ts('wsycd') }}</th>
                    <th data-field="date_sold" class="sortable {{ setOrderClass('date_sold') }}">{{ ts('DATESOLD') }}</th>
                    <th data-field="warranty_id" class="sortable {{ setOrderClass('warranty_id') }}">{{ ts('zbxq') }}</th>
                </tr>
                </thead>
                <tbody>
                @foreach($data as $k => $v)
                    <tr class="item-list">
                        <td>{{ @$data->firstItem()+$k }}</td>
                        <td>{{ $v->dealer_name }}</td>
                        <td>{{ $v->roll_number }}</td>
                        <td>{{ $v->film_type }}</td>

                        <td class="roll-sales-length">{{ $v->length }} cm</td>

                        <td>
                            {{ getRlenV401($v->roll_number, @$v->user_id) }} cm
                        </td>
                        <td>
                            {{ fdate(@$v->installation_date) }}
                        </td>
                        <td>
                            @if($v->warranty_id)
                                <a href="/admin/warranty/{{ $v->wid }}">{{ $v->warranty_id }}</a>
                            @endif
                        </td>
                    </tr>
                @endforeach
                </tbody>
            </table>

            <div class="text-right my-3">
                <span class="alert alert-primary d-inline-block mb-0">
                    {{ ts('rollsalesstatistics') }}：
                    <span class="text-danger" style="font-weight: bold;letter-spacing: .4px">{{ (@$total/100) }} m</span>
                    {{--<span class="text-danger roll-saless-tatistics"></span>--}}
                </span>
            </div>
            <div class="my-3">
                {{ $data->appends(request()->input())->links() }}
            </div>
        </div>

        <div class="modal fade" id="chartWarpper">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        模态框内容..
                    </div>
                    <div class="modal-footer text-center">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ ts('close') }}</button>
                    </div>
                </div>
            </div>
        </div>

    </div>


@endsection

@section('script')
    <script src="/dist/vue.js"></script>
    <script src="/dist/element-ui.js"></script>
    <script>
        $(document).ready(function () {
            /*initTable();
            $('body').on('click', '#searchWrapper .search', function () {
                initTable();
            })*/
        })
        $('.table.bt-table').bootstrapTable({}).removeClass('d-none')
        function showChart() {
            $('#chartWarpper').modal()
        }
        function initTable() {
            $('.table.bt-table').bootstrapTable('destroy')
            $('.table.bt-table').bootstrapTable({
                url: '/admin/ajax/performance?a=distributor&id={{ $id }}',
                showColumns: true,
                serverSort: true,
                sidePagination: 'server',
                pagination : true,
                paginationDetailHAlign: 'right',
                paginationHAlign: 'left',
                searchSelector: '#searchWrapper',
                queryParamsType : "limit",
                pageSize: 15,
                queryParams: function (params) {
                    console.log(params)
                },
                formatDetailPagination: function (p) {
                    console.log(p)
                }

                /*fixedColumns: true,
                fixedNumber: 1,
                fixedRightNumber: 1,*/
            }).removeClass('d-none')
        }
        function indexFormatter(value, row, index) {
            console.log($('.table.bt-table').bootstrapTable('getOptions').pageNumber);
            return index + 1;
            return _params.data.offset + index + 1;
        }
        function btdf1(value, row, index) {
            if (row.wid) {
                return '<a href="/admin/warranty/'+row.wid+'">'+row.warranty_id+'</a>';
            }
            return row.warranty_id || '-';
        }
        function btdf2(value, row, index) {
            if (row.wid) {
                return '<a href="/admin/warranty/'+row.wid+'">{{ ts('zbxq') }}</a>';
            }
            return '-';
        }
    </script>
@endsection